<template>
  <div ref="PolylineCanvas" class="Histogram"></div>
</template>
<script>
  import echarts from 'echarts'
  import { on, off } from '@/tools/tools'
  export default {
    props:{
      data:{
        type:Object
      },
      title:{
        type:String
      },
      align:{
        type:String,
        default:"center"
      }
    },
    data() {
      return {
        Polyline: null
      }
    },
    mounted() {
      this.getPolyline()
    },
    methods: {
      resizePolyline() {
        this.Polyline.resize()
      },
      getPolyline() {
        var XData = this.data.x
        var yData = this.data.y
        var option = {
          title: {
            text: this.title||'',
            top: 10,
            left: this.align,
            textStyle: {
              fontSize: 16,
              fontWeight: 400
            }
          },
          grid: {
            right: '3.5%'
          },
          xAxis: {
            axisTick: {
              show: true
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#eee'
              }
            },
            splitArea: {
              show: false
            },
            data: XData,
            axisLabel: {
              formatter: function (value) {
                var ret = '' // 拼接加\n返回的类目项
                var maxLength = 1 // 每项显示文字个数
                var valLength = value.length // X轴类目项的文字个数
                var rowN = Math.ceil(valLength / maxLength) // 类目项需要换行的行数
                if (rowN > 1) {
                  // 如果类目项的文字大于3,
                  for (var i = 0; i < rowN; i++) {
                    var temp = '' // 每次截取的字符串
                    var start = i * maxLength // 开始截取的位置
                    var end = start + maxLength // 结束截取的位置
                    // 这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                    temp = value.substring(start, end) + '\n'
                    ret += temp // 凭借最终的字符串
                  }
                  return ret
                } else {
                  return value
                }
              },
              interval: 0,
              fontSize: 12,
              fontWeight: 100,
              textStyle: {
                color: '#333'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#eee'
              }
            }
          },
          yAxis: {
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#eee'
              }
            },
            splitArea: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#19be6b',
                fontSize: 12
              }
            },
            axisLine: {
              lineStyle: {
                color: '#eee'
              }
            }
          },
          tooltip: {
            trigger: 'axis',
            textStyle: {
              fontSize: 12
            },
            axisPointer: {
              type: 'shadow' // 鼠标放上去的指示线条
            },
            formatter: '{b0}:{c0}'
          },
          series: {
            type: 'bar',
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#00d386' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#0076fc' // 100% 处的颜色
                    }
                  ],
                  globalCoord: false // 缺省为 false
                },
                barBorderRadius: [10, 10, 0, 0]
              }
            },
            // barWidth: 7,
            data: yData
          }
        }
        this.$nextTick(() => {
          this.Polyline = echarts.init(this.$refs.PolylineCanvas)
          this.Polyline.setOption(option)
          on(window, 'resize', this.resizePolyline)
        })
      }
    },
    beforeDestroy() {
      off(window, 'resize', this.resizePolyline)
    }
    // computed: {
    //   getCollapsed() {
    //     return this.$store.state.user.collapsed
    //   }
    // },
    // watch: {
    //   deep: true,
    //   getCollapsed() {
    //     setTimeout(() => {
    //       this.resizePolyline()
    //     }, 220)
    //   }
    // }
  }
</script>
<style lang="less" scoped>
  .Histogram {
    height: 300px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
  }
</style>